<!--
分页加载
-->

<template>
  <div class="body mui-content">
    <div id="pullrefresh" class="mb">
      <div class="" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <ul class="mui-table-view-chevron" id="inner">
          <div class="person" >
            <div class="person-data" v-for="(li,index) in list" :key="index">
              <div class="discovery">
                <div></div>
              </div>
              <div class="mui-input-row mui-checkbox mui-left">
                <label></label>
                <input name="test" :value="li.uid" type="checkbox">
              </div>
              <div class="headIcon" :style="{background: 'url('+ li.photo + ')'}"></div>
              <div class="name">{{li.name}}</div>
            </div>
          </div>
        </ul>
      </div>
    </div>
    <div class="mui-bar-tab bottomdiv">
      <div class="person all_in">
        <div class="mui-input-row mui-checkbox mui-left">
          <label>全选</label>
          <input type="checkbox" id="all" @change="all_person">
        </div>
        <div class="pass" @click="submit()">群发</div>
      </div>
    </div>
  </div>
</template>

<script>
import { isLogin } from '@/api/login'
import { getMemberList } from '@/api/society'
export default {
  name: 'PersonCheck',
  data () {
    return {
      list: [],
      page: 1,
      checkAll: true,
      finalPage: 1,
      name: this.$route.query.name
    }
  },
  created () {
    this.isLogin()
    this.loadList(1)
  },
  methods: {
    isLogin () {
      isLogin().then(res => {
        if (res.code === 0) {
          alert('请先登录')
          this.$router.push('/login')
        }
      })
    },
    loadMore () {
      if (this.finalPage >= this.page) {
        this.busy = true
        console.log(123123)
        this.page++
        this.loadList(this.page)
        setTimeout(() => {
        // 这里请求接口去拿数据，实际应该是调用一个请求数据的方法
          this.busy = false
          console.log(454545)
        }, 1000)
      } else {
        this.busy = false
      }
    },
    loadList (page) {
      getMemberList({
        sid: this.$route.query.sid,
        status: '1',
        page: this.page
      }).then(res => {
        this.finalPage = res.data.last_page
        if (this.page > res.data.last_page) {
          // this.$refs.myscroller.finishInfinite(true)
          this.busy = false
        } else {
          this.list = this.list.concat(res.data.data)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    all_person () {
      var box = document.getElementsByName('test')
      var btn = document.getElementById('all')
      if (btn.checked === true) {
        for (let i = 0; i < box.length; i++) {
          box[i].checked = true
        }
      } else {
        for (let i = 0; i < box.length; i++) {
          box[i].checked = false
        }
      }
    },
    submit () {
      const obj = document.getElementsByName('test')
      var checkVal = []
      for (let k in obj) {
        if (obj[k].checked) { checkVal.push(obj[k].value) }
      }
      console.log(checkVal)
      localStorage.setItem('target', checkVal)
      var param = (window.location.hash).split('#')[1]
      if (param === 'email') {
        this.$router.push('/send_email?sid=' + this.$route.query.sid)
      } else {
        this.$router.push('/send_sms?sid=' + this.$route.query.sid + '#person_sms')
      }
    }
  }
}
</script>

<style type="text/css" scoped>
@import '../style/css/mui.min';
* {
  margin: 0;
  padding: 0;
}

.body {
  /* background-image: url(../style/img/bg-bj.png); */
  min-height: 600px;
  font-family: PingFang SC;
  touch-action: pan-y;
}
#inner {
  height: auto;
  overflow-y: auto;
  padding-bottom:40px;
}
.person {
  width: 98%;
  /* background: white; */
  margin-left: 1%;
}

.person-data {
  border-bottom: solid 1px #eceef0;
  min-height: 75px;
  height: auto;
}

.headIcon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  float: left;
  margin-top: 12px;
  background-size: cover !important;
}

.name {
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 74px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(22, 22, 22, 1);
  margin-left: 10px;
}

.discovery div {
  background: url(../style/img/sign.png) no-repeat;
  background-size: cover;
  width: 10px;
  height: 20px;
  float: right;
  display: inline-block;
  margin-right: 30px;
  margin-top: 25px;
}

.mui-content > .mui-table-view:first-child {
  margin-top: -1px;
}

.mui-table-view-chevron {
  margin-bottom: 40px !important;
}

.mui-pull-caption {
  display: none !important;
}

.all_in {
  height: 80px !important;
}

.pass {
  width: 50%;
  height: 50px;
  background: #f97782;
  border-radius: 30px;
  float: right;
  color: white;
  text-align: center;
  line-height: 50px;
  margin-top: 15px;
  margin-right: 10px;
}

.mui-checkbox {
  height: 30px;
  margin-top: 20px;
  display: inline-block;
  float: left;
}

.bottomdiv {
  background: white;
  position: fixed;
  z-index: 10;
  height: 63px;
  border-bottom: 0;
  backface-visibility: hidden;
}

.mui-content {
  background: white;
  /* background-image: url(../style/img/bg-bj.png); */
  /* background-repeat: no-repeat; */
}
</style>
